<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
            padding-left: 30px;
        }

        .chart-box {
            width: 400px;
            height: 200px;
            border: 1px solid #666;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h4>$refs</h4>
        <ol>
            <li>vm.$refs:返回一个对象,记录当前Vue实例模板中,定义了ref属性的所有 DOM 元素。</li>
            <li>提供一个固定的DOM加载方案,实现三方工具的功能整合</li>
        </ol>
        <p id="p" ref="pDom">模板中的DOM元素</p>
        <input type="button" value="printRefs()" @click="printRefs()">
        <input type="button" value="比较vue下的pDom和window下的pDom" @click="printValue()">

        <div id="chart" ref="chartDom" class="chart-box" @mouseover="stopTime()" @mouseout="restTimeForChart()"></div>
        <input type="button" value="initEcharts" @click="initEcharts()">
        <br>
        <input type="button" value="stopTime" @click="stopTime()">
        <input type="button" value="startTime" @click="restTimeForChart()">
        
    </div>
    <script src="../assets/mock/mock-min.js"></script>
    <script type="module">
        import * as echarts from "../assets/echarts/echarts.esm.js";
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"

        let wpdom = document.querySelector("#p")

        createApp({
            data() {
                return {
                    year: 2021,
                    data: [5, 20, 36, 10, 10, 20],
                    chartOptions: {
                        // title: {
                        //     text: ''
                        // },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '销量',
                                type: 'bar',
                                data: []
                            }
                        ]
                    }
                }
            },
            methods: {
                printRefs() {
                    console.log(this.$refs);
                },
                printValue() {
                    let refDom = this.$refs.pDom
                    console.log("wpdom", wpdom);
                    console.log("refDom", refDom);
                    console.log("wpdom===refDom:", wpdom === refDom);

                },
                stopTime(){
                    clearInterval(this.$timer)
                },
                restTimeForChart() {
                    if(!this.$myChart){
                        return;
                    }
                    this.$timer = setInterval(()=>{
                        let y = this.year+1;
                        if(y>new Date().getFullYear()){
                            this.year = 2021
                        }else{
                            this.year = y;
                        }
                        this.data = Mock.mock({
                            "data|6":[ "@integer(10, 100)" ]
                        }).data
                        // 数据心跳包
                        this.$myChart.setOption( {
                            title: {
                                text: this.year+"年销量"
                            },
                            series: [
                                {
                                    name: '销量',
                                    type: 'bar',
                                    data: this.data
                                }
                            ]
                        } )
                    },2000)
                },
                initEcharts() {
                    // echarts 只需要初始化一次
                    // let myChart = echarts.init(this.$refs.chartDom);
                    // ==> 页面定义的DOM元素，并不是vue最终运行的DOM元素
                    // let myChart = echarts.init( document.querySelector("#chart") );

                    // setOption 参数覆盖后补方法
                    // myChart.setOption(this.chartOptions)
                    // myChart.setOption({
                    //     title: {
                    //         text: this.year + "年销量"
                    //     },
                    //     series: [
                    //         {
                    //             name: '销量',
                    //             type: 'bar',
                    //             data: this.data
                    //         }
                    //     ]
                    // })

                    this.$myChart = echarts.init(this.$refs.chartDom);
                    this.$myChart.setOption(this.chartOptions)
                    this.$myChart.setOption({
                        title: {
                            text: this.year + "年销量"
                        },
                        series: [
                            {
                                name: '销量',
                                type: 'bar',
                                data: this.data
                            }
                        ]
                    })
                    this.restTimeForChart();
                    // setInterval(()=>{
                    //     let y = this.year+1;
                    //     if(y>new Date().getFullYear()){
                    //         this.year = 2021
                    //     }else{
                    //         this.year = y;
                    //     }
                    //     this.data = Mock.mock({
                    //         "data|6":[ "@integer(10, 100)" ]
                    //     }).data
                    //     // 数据心跳包
                    //     myChart.setOption( {
                    //         title: {
                    //             text: this.year+"年销量"
                    //         },
                    //         series: [
                    //             {
                    //                 name: '销量',
                    //                 type: 'bar',
                    //                 data: this.data
                    //             }
                    //         ]
                    //     } )
                    // },4000)
                }
            }
        }).mount("#app")
    </script>
</body>

</html>